<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础配置' },
          { name: 'box-query', title: '查询配置' },
          { name: 'box-print', title: '打印配置' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础配置</div>
          <customFormItem label="字段名" help="数据字段" name="field" :parent="_self" :form="form"/>
          <customFormItem label="标签名" help="列表显示名称" name="label" :parent="_self" :form="form"/>
          <customFormItem label="是否显示" help="是否显示该字段" name="flagShow" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="显示顺序" help="字段从左到右的显示排序" name="sort" :parent="_self" :form="form"
                          :type="constCommon.formItemType.inputNumber.name"/>
          <customFormItem label="对齐方式" name="align" :parent="_self" :form="form"
                          :type="constCommon.formItemType.selectDict.name"
                          :config="{dictType: constCommon.dictType.align}"/>
          <customFormItem label="字段宽度" help="像素值" name="width" :parent="_self" :form="form"
                          :type="constCommon.formItemType.inputNumber.name"/>
          <customFormItem label="固定列" name="fixed" :parent="_self" :form="form"
                          :type="constCommon.formItemType.selectDict.name"
                          :config="{dictType: constCommon.dictType.fixed}"/>
          <customFormItem label="禁止排序" help="禁用后，列表不可以排序" name="flagSortDisabled" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="可点击" help="启用后，显示为链接" name="flagClick" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="点击提示" help="点击的提示信息，当鼠标放上去会显示" name="clickTitle" :parent="_self"
                          :form="form"/>
          <customFormItem label="计算总计" help="启用后，表头进行合计" name="flagTotalRow" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="合并单元格" help="启用后，合并该单元格，必须前面的列也是合并单元格才可以合并" name="flagMergeCell"
                          :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="上级表头列" help="指定了后，将合并显示到上级表头列里面" name="parentField" :parent="_self"
                          :form="form"/>
          <customFormItem label="备注" name="remarks" :parent="_self" :form="form"/>

          <div id="box-query" class="box-title">查询配置</div>
          <customFormItem label="查询类型" name="queryType" :parent="_self" :form="form"
                          :type="constCommon.formItemType.selectDict.name"
                          :config="{dictType: constCommon.dictType.queryType}"/>
          <customFormItem v-show="form.queryType == 'select'" label="字典" name="dict" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.selectStatic.name"
                          :config="{options: cpDictTypeList}"/>
          <customFormItem v-show="form.queryType == 'dataview' || form.queryType == 'dataviewmore'"
                          label="列表标志" help="" name="viewName" :parent="_self" :form="form"/>
          <customFormItem v-show="form.queryType == 'dataview' || form.queryType == 'dataviewmore'"
                          label="列表主键" help="" name="queryField" :parent="_self" :form="form"/>

          <customFormItem v-show="form.queryType === 'dateArea'" label="查询月开始" help="是否从当月第一天开始查询"
                          name="flagMonthStart" :parent="_self" :form="form"/>
          <customFormItem v-show="strings.isNotBlank(form.queryType) " label="查询必填"
                          help="选中后，查询导出打印时该查询条件用户必须输入" name="flagQueryRequire" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem v-show="['dateArea','dateyear','datemonth'].includes(form.queryType) "
                          label="初始查询日期" help="报表没有查询条件默认查询当前日期字段,当天数据,查询前几天,就是负几天。年份月份一样"
                          name="initDateQuery" :parent="_self" :form="form"
                          :type="constCommon.formItemType.inputNumber.name"/>

          <div id="box-print" class="box-title">打印配置</div>
          <customFormItem label="打印表头" help="启用后，将在表头输出该字段查询条件" name="flagPrintHead" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="禁用打印" help="启用后，打印将忽略该字段" name="flagNorint" :parent="_self"
                          :form="form"
                          :type="constCommon.formItemType.switch.name"/>
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
    }
  },
  methods: {
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        console.log('propInitData', this.propInitData)
        if (!this.form.id) {
          this.$set(this.form, 'reportId', this.propInitData.id)
        }
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        if (this.strings.isBlank(this.form.id)) {
          this.$set(this.form, 'flagShow', true)
          this.$set(this.form, 'align', 'center')
        }
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {customAnchor},
  computed: {
    cpDictTypeList() {
      return this.$store.state.dicts.dictTypeList.map( ob => {
        return {
          value: ob.code,
          label: ob.name
        }
      })
    }
  }
}
</script>
